<template>
  <div>
      <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0 ? 'mui-active' : '']"  v-for='item in imgCategorys' :key='item.id'  data-wid="tab-top-subpage-1.html" @tap=getImgList(item.id)>
							{{item.title}}
						</a>
					</div>
				</div>

			</div>
		
			<ul>
				<router-link v-for='item in imgList' :key='item.id' :to="'/home/photoInfo/'+item.id" tag='li'>
					<img v-lazy="item.img_url" alt="">
					<div>
						<h3>{{item.title}}</h3>
						<p>{{item.zhaiyao}}</p>
					</div>
				</router-link>	
					
			</ul>
  </div>
</template>
<script>
import mui from '../../lib/js/mui.js'
import {Toast} from 'mint-ui';


export default{
    data(){
        return{
			imgCategorys:[],
			imgList:[]
		}
    },
	created(){
		this.getImgCategory();
		this.getImgList(0);
	},
    mounted(){ // 组件第一次显示到页面中不能滑动的问题
        mui('.mui-scroll-wrapper').scroll({ // 初始化后scroll控件才有效
	         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
    },
    methods:{
		getImgCategory(){
			this.$http.get('api/getimgcategory').then(items=>{
				console.log(items.body);
				if(items.body.status===1){
					Toast('获取失败！');
				}else{
					// 将全部加入数组中
					var all={title:'全部',id:0};
					items.body.message.unshift(all);
					this.imgCategorys=items.body.message;
				}
			})
		},
		getImgList(cateid){
			this.$http.get('api/getimages/'+cateid).then(results=>{
				console.log(results.body)
				if(results.body.status===1){
					Toast('获取失败');
				}else{
					this.imgList=results.body.message;
				}
			})
		}
	}
}
</script>
<style scoped lang='scss'>
    *{ //滑动时报警的问题
         touch-action: pan-y; 
    }
	ul{
		padding:0;
		margin:0;
		li{
			background:#ccc;
			list-style:none;
			margin:10px;
			box-shadow:0 0 8px #999;
			text-align:center;
			position:relative;
			img{
				width:100%;
				vertical-align:middle;
			}
			img[lazy='loading'] {
 			 	width: 40px;
 				height: 300px;
  				margin: auto;
			}
			div{
				position:absolute;
				bottom:0;
				color:#fff;
				text-align:left;
				max-height:84px;
				background-color:rgba(0,0,0,0.4);
				h3{
					font-size:14px;
					
				}
				p{
					color:#fff;
					font-size:12px;
				}
			}
		}
	}
</style>

